import * as echarts from 'echarts';
import React, { useRef, useEffect } from "react";
import { chinaMapConfig } from "./forMap/config";
import { chinaDataGeo } from "./forMap/geojson";
import { resData } from "./forMap/chinaData";

export default function TitleSwitch() {
    const ref = useRef(null);
    let mapInstance = null;
    let data = resData.data, max = resData.max, min = 0;
    const options = {
        title: {
            id: "china",
            text: "数据地图",
            left: "left",
            textStyle: {
                color: "#000"
            },
            triggerEvent: true,
        },
        tooltip: {
            // 提示框
            trigger: "item",
            showDelay: 0,
            transitionDuration: 0.2,
            formatter: function (params) {
                let { data = {} } = params;
                let { value = 0 } = data;
                return `${params.name}<br/>
                  个数: ${value}`;
            }
        },
        visualMap: [
            {
                // 视觉映射组件
                type: "continuous",
                orient: 'horizontal',
                left: "right",
                itemWidth: 12,
                top: 1,
                min: 0,
                max: max,
                inRange: {
                    color: ['#d9e4fb', '#d8e3fa', '#88bbee', '#6ca5dc', '#6199d0', '#5d96cd', '#5890c7']
                },
                text: [`最大值：${max}`, 0],
                textStyle: {
                    color: "#000"
                }
            }
        ],
        dataset: {
            source: data
        },
        series: {
            // 地图,可以是数组，多个
            label: {
                show: true, //显示省市名称
                position: [1, 100], // 相对的百分比
                fontSize: 12,
                offset: [2, 0],
                align: "left"
            },
            itemStyle: {
                areaColor: "#fff" // 地图图形颜色
            },
            type: "map",
            roam: true,
            map: "china",
            zoom: 1.2, // 当前视角的缩放比例
            scaleLimit: {
                max: 2,
                min: 1 // 设置默认缩放效果
            },
            top: "20%" // 距离顶部距离
        }
    };
    const optionsOther = {
        title: {
            id: "other",
            text: "数据地图",
            left: "left",
            textStyle: {
                color: "#000"
            },
            triggerEvent: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                areaStyle: {}
            }
        ]
    };

    const changeMapType = (params) => {
        console.log("params", params);
        console.log("mapInstance", mapInstance);
        const currentOptions = mapInstance.getOption();
        const titleData = currentOptions.title.length > 0 ? currentOptions.title[0] : currentOptions.title;
        let resOption = null;
        resOption = titleData.id !== "china" ? options : optionsOther;
        mapInstance.setOption(resOption, true);
    }

    const renderMap = () => {
        const renderedMapInstance = echarts.getInstanceByDom(ref.current);
        if (renderedMapInstance) {
            mapInstance = renderedMapInstance;
        } else {
            mapInstance = echarts.init(ref.current);
        }

        mapInstance.setOption(options);
        mapInstance.on('click', 'title', changeMapType);
    };

    useEffect(() => {
        echarts.registerMap("china", { geoJSON: chinaDataGeo });
        renderMap();
    }, []);

    useEffect(() => {
        window.onresize = function () {
            mapInstance.resize();
        };
        return () => {
            mapInstance && mapInstance.dispose();
        };
    }, []);

    return (
        <div>
            <p><b>点击标题切换图表配置项</b></p>
            <div style={{ width: "100%", height: "75vh" }} ref={ref}></div>
        </div>
    )
}
